<script setup>

import Card from "@/components/Card.vue";
import {
    Setting, Lock, Switch
} from "@element-plus/icons-vue";
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {post, get} from "@/net";

const from = reactive(
    {
        password: '',
        new_password: '',
        new_password_repeat: '',
    }
)
const validatePassword = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入新密码'));
    } else if (value !== from.new_password) {
        callback(new Error('两次输入密码不一致!'));
    } else {
        callback();
    }
};
const rules = {
    password: [
        {required: true, message: '请输入旧密码', trigger: 'blur'},
        {min: 6, max: 16, message: '密码长度在 6 到 16 个字符', trigger: 'blur'},
    ],
    new_password: [
        {required: true, message: '请输入新密码', trigger: 'blur'},
        {min: 6, max: 16, message: '密码长度在 6 到 16 个字符', trigger: 'blur'},
    ],
    new_password_repeat: [
        {required: true, message: '请再次输入新密码', trigger: 'blur'},
        {validator: validatePassword, trigger: ['blur', 'change']}

    ]
}
const formRef = ref()
const valid = ref(false)
const onValidate = (prop, isValid) => valid.value = isValid

function resetPassword() {
    formRef.value.validate((isValid) => {
        if (isValid) {
            post('/api/user/change-password', from, () => {
                ElMessage.success('修改密码成功')
                formRef.value.resetFields();
            })
        }
    })
}

const saving = ref(true)
const privacy = reactive({
    gender: false,
    phone: false,
    email: false,
    wx: false,
    qq: false
})
get('/api/user/privacy', data => {
    privacy.gender = data.gender;
    privacy.phone = data.phone;
    privacy.email = data.email;
    privacy.wx = data.wx;
    privacy.qq = data.qq;
    saving.value = false
})

function savePrivacy(type, status) {
    saving.value = true
    post('/api/user/save-privacy', {
        type: type,
        status: status
    }, () => {
        ElMessage.success('修改隐私设置成功')
        saving.value = false
    })
}
</script>
<template>
    <div style="margin: auto;max-width: 600px">
        <div style="margin-top: 20px">
            <card v-loading="saving" :icon="Setting" title="隐私设置"
                  desc="在这里设置哪些内容可以展示被其他人看到请注意自己的隐私">
                <div class="checkbox-list">
                    <el-checkbox @change="savePrivacy('gender',privacy.gender)" v-model="privacy.gender">
                        公开展示我的性别
                    </el-checkbox>
                    <el-checkbox @change="savePrivacy('phone',privacy.phone)" v-model="privacy.phone">
                        公开展示我的手机号
                    </el-checkbox>
                    <el-checkbox @change="savePrivacy('email',privacy.email)" v-model="privacy.email">
                        公开展示我的电子邮件
                    </el-checkbox>
                    <el-checkbox @change="savePrivacy('wx',privacy.wx)" v-model="privacy.wx">公开展示我的微信号
                    </el-checkbox>
                    <el-checkbox @change="savePrivacy('qq',privacy.qq)" v-model="privacy.qq">公开展示我的qq号
                    </el-checkbox>
                </div>
            </card>
            <card style="margin: 20px 0 " :icon="Setting" title="修改密码" desc="修改密码请在这里操作，请务必牢记密码">
                <el-form @validate="onValidate" :model="from" ref="formRef" :rules="rules" label-width="100"
                         style="margin: 20px">
                    <el-form-item label="旧密码" prop="password">
                        <el-input type="password" v-model="from.password" :prefix-icon="Lock" placeholder="请输入旧密码"
                                  maxlength="16"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="new_password">
                        <el-input type="password" v-model="from.new_password" :prefix-icon="Lock"
                                  placeholder="请输入新密码" maxlength="16"></el-input>
                    </el-form-item>
                    <el-form-item label="重复新密码" prop="new_password_repeat">
                        <el-input type="password" v-model="from.new_password_repeat" :prefix-icon="Lock"
                                  placeholder="请重新输入新密码" maxlength="16"></el-input>
                    </el-form-item>
                    <div style="text-align: center">
                        <el-button @click="resetPassword" :icon="Switch" type="primary" style="margin: 0 10px">
                            修改密码
                        </el-button>
                    </div>
                </el-form>
            </card>
        </div>
    </div>
</template>


<style scoped>
.checkbox-list {
    margin: 20px 0 0 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
</style>